<template>
  <div class="video_container">
    <div class="header">
      <div class="blog_nav">
          <div class="tag_list">
            <div
              @click="handleCheckParent(tag.id, index)"
              v-for="(tag, index) in categoryBaseList"
              :key="index"
              :class="['blog_nav_item',{active: navIndex === index}]"
            >
              {{ tag.name }}
            </div>
          </div>
        </div>

        <div class="blog_tag">
          <div class="blog_tag_list" v-if="categoryChildrenList.length > 0">
            <div
              :class="['blog_tag_item',{active: tagIndex === index}]"
              @click="handleCheckChildren(tag.id, index)"
              v-for="(tag, index) in categoryChildrenList"
              :key="index"
            >
              {{ tag.name }}
            </div>
          </div>
        </div>
    </div>

    <div class="body">
      <div class="video_body">
        <div class="video_item" v-for="(item,index) in videoList" :key="index" @click="handleVideoInfo(item.videoUrl)">
        <el-image
          class="main_page"
          :src="item.mainImg"/>
        <div class="title">
          {{ item.title }}
        </div>
        <div class="use_data">
          <div>
            <svg-icon icon-class="video" />
            {{ item.readVolume }}人看过
          </div>
          <div>
            <svg-icon icon-class="duration" />
            {{ item.duration }}
          </div>
        </div>
      </div>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="pageQuery.pageNum"
        v-model:limit="pageQuery.pageSize"
        @pagination="getVideoList"
     />
  </div>
</template>
   
<script setup  name="Category">
import { listCategory } from "@/api/ams/category";
import { listVideo } from "@/api/video";

import { useSiteStore } from "@/store/moudel/site.js";
import { ref, onMounted } from 'vue';

const route = useRoute();
const router = useRouter();
const categoryList = ref([]);
const categoryBaseList = ref([]);
const categoryChildrenList = ref([]);
const videoList = ref([]);
const tagStyle = ref(["", "success", "info", "warning", "danger"]);
const total = ref(0);
const pageQuery = ref({
  pageNum: 1,
  pageSize: 30,
  categoryId: 0,
});
const fullscreenLoading = ref(true)
const navIndex = ref(0);
const tagIndex = ref(0);
const navCategoryId = ref(0);

/**跳转 */
function handleNatigation(id, path) {
  router.push({ path: path, query: { id: id } });
}
function handleVideoInfo(videoUrl) {
  window.open(videoUrl,'_blank');
}

// 点击分类
function handleCheckParent(id,index) {
  if(id != 0) {
    categoryChildrenList.value = categoryList.value.filter(item => item.parentId == id);
    let zero = {id: 0,name: '全部'};
    categoryChildrenList.value.unshift(zero);
  }else {
    categoryChildrenList.value = [];
  }
  
  // 查看所有文章
  pageQuery.value.categoryId = id;
  navCategoryId.value = id;
  navIndex.value = index;
  getVideoList();
}
// 点击子分类
function handleCheckChildren(id,index) {
  // 如果点击 全部
  if(id == 0) {
    pageQuery.value.categoryId = navCategoryId.value;
  }else {
    pageQuery.value.categoryId = id;
  }
  tagIndex.value = index;
  getVideoList();
}

// 清空查询文章列表
function getVideoList() {
  listVideo(pageQuery.value).then((res) => {
      videoList.value = res.data.list;
      total.value = res.data.total;
    }).finally(() => (fullscreenLoading.value = false))
}
/**分页 */
function handlePage(val) {
  fullscreenLoading.value = true
  pageQuery.value.pageNum = val;
  getVideoList();
}

/**获取所有分类 */
function getCategoryList() {
  listCategory().then((res) => {
    categoryList.value = res.data;
    categoryBaseList.value = categoryList.value.filter(item => item.parentId == 0);
    let zero = {id: 0,name: '推荐'};
    categoryBaseList.value.unshift(zero);
  });
}

// 查看文章详情
function handleArticleInfo(id) {
  router.push({path:'/article',query: { articleId: id }})
}

onMounted(() =>{
  getCategoryList();
  getVideoList();
})

</script>
   
<style lang='scss' scoped>
.video_container {
  padding-top: 100px;
}
.header {
    width: 100%;
    margin: auto;
    max-width: 1200px;

    .blog_nav {
      display: flex;
      align-items: center;
    }

    .tag_list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;

      .blog_nav_item {
        margin-right: 30px;
        padding: 10px 24px 10px 24px;
        font-family: 'Ali_M';
        font-size: 24px;
        color: #365536;
        cursor: pointer;

        &:hover {
          color: #aed277;
        }
      }

      .active {
        color: #85b13b;
        background-color: #fff;
        border-radius: 8px 8px 0px 0px;
      }
    }

    .blog_tag {
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      background-color: #fff;
      .blog_tag_list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 30px 0px 30px 6px;
        .blog_tag_item {
          margin-right: 16px;
          font-family: 'Ali_R';
          font-size: 14px;
          color: #707666;
          padding: 2px 14px;
          border-radius: 20px;
          cursor: pointer;

          &:hover {
            color: #222226;
          }
        }

        .active {
          color: #85b13b;
        }
      }

    }
  }
.body {
  margin: auto;
  padding: 20px 0px;
  max-width: 1200px;
  .video_body {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    flex-wrap: wrap;
    .video_item {
      padding: 15px;
      margin: 0px 20px 20px 0px;
      background: #ffffff;
      border: 1px solid #ffffff;
      border-radius: 10px;
      box-shadow: 0px 0px 10px 0px rgba(168,168,168,0.26);
      cursor: pointer;
      .main_page {
        width: 250px;
        height: 157px;
        background: #bfbfbf;
        border-radius: 10px;
      }
      .title {
        width: 250px;
        margin-top: 12px;
        font-size: 16px;
        font-family: 'Ali_R';
        font-weight: 400;
        text-align: left;
        color: #323333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
      }
      .use_data {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        font-size: 13px;
        font-family: 'Ali_R';
        font-weight: normal;
        text-align: left;
        color: #c7c7c7;
      }
    }
  }
  .video_body > :nth-child(4n) {
    margin-right: 0;
  }
}
</style>